<template>
	<scDrawer title="选课报名" v-model="drawer" size="72%" @cancel="$emit('close')">
		<el-descriptions title="学员信息" :column="3" border style="width: 80%">
			<el-descriptions-item
				v-for="(item, index) in userInfoList"
				:key="index"
				:label="item.label"
			>
				{{ item.value }}
			</el-descriptions-item>
		</el-descriptions>
		<div class="el-descriptions">
			<div class="el-descriptions__header">
				<span class="el-descriptions__title">班级信息</span>
			</div>
			<div class="el-descriptions__body">
				<el-table
					:data="classInfo"
					:span-method="handleTableRowMerge"
					border
					style="width: 100%"
				>
					<el-table-column prop="name" label="班级名称" width="220">
						<template #default="{ row }">
							<span v-if="!row.isMergeRow">{{ row.name }}</span>
							<div v-else class="flex-row justify-end">
								<span
									>化妆套装数量：<el-input-number
										v-model.lazy="amount.goodsCount"
										size="small"
										:controls="false"
										:precision="0"
										:min="1"
										:max="99999999"
										style="width: 95px; margin-right: 10px"
										@change="
											amount.goodsPrice =
												amount.init_goodsPrice *
												amount.goodsCount
										"
									></el-input-number
								></span>
								<span
									>商品费用：
									<el-input-number
										v-model.lazy="amount.goodsPrice"
										size="small"
										:controls="false"
										:precision="2"
										:min="0"
										:max="99999999"
										style="width: 95px"
									></el-input-number>
								</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="teacher" label="教师" />
					<el-table-column prop="studentCount" label="人数" />
					<el-table-column prop="startTime" label="开课日期" />
					<el-table-column prop="signUpCount" label="报名课次">
						<template #default="{ row }">
							<el-link
								type="primary"
								:underline="false"
								@click="handleSelectSignUpCount(row)"
								>{{ row.signUpCount || 0 }} 次 选择</el-link
							>
						</template>
					</el-table-column>
					<el-table-column prop="classAmount" label="课次学费" />
					<el-table-column
						prop="signUpAmount"
						label="报名学费"
						width="120"
					>
						<template #default>
							<el-input-number
								v-model.lazy="amount.signUpAmount"
								size="small"
								:controls="false"
								:precision="2"
								:min="0"
								:max="99999999"
								style="width: 95px"
								@blur="
									!amount.signUpAmount &&
										(amount.signUpAmount =
											amount.useIntegral
												? amount.discount_signUpAmount
												: amount.init_signUpAmount)
								"
							></el-input-number>
						</template>
					</el-table-column>
					<el-table-column
						prop="actualPayment"
						label="缴费金额"
						width="120"
					>
						<template #default>
							<el-input-number
								v-model="amount.actualPayment"
								size="small"
								:controls="false"
								:precision="2"
								:min="0"
								:max="99999999"
								style="width: 95px"
								@blur="
									!amount.actualPayment &&
										(amount.actualPayment =
											amount.useIntegral
												? amount.discount_actualPayment
												: amount.init_actualPayment)
								"
							></el-input-number>
						</template>
					</el-table-column>
					<el-table-column prop="integral" label="使用积分">
						<template #default>
							{{
								amount.useIntegral
									? `${amount.integral}积分，抵扣${discount}.00元`
									: 0
							}}
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<el-descriptions title="费用信息" :column="2" border style="width: 60%">
			<el-descriptions-item label="原价合计">
				{{ originalPrice }}
			</el-descriptions-item>
			<el-descriptions-item label="现价合计">
				{{ shouldPayment }}
			</el-descriptions-item>
			<el-descriptions-item label="收费合计">
				{{ actualPayment }}
			</el-descriptions-item>
			<el-descriptions-item label="欠费合计">
				<el-link :underline="false" type="danger">{{ debt }}</el-link>
			</el-descriptions-item>
			<el-descriptions-item label="积分信息" :span="2">
				<el-checkbox
					v-model="amount.useIntegral"
					:label="`可使用${amount.integral}积分抵扣${Math.floor(
						amount.integral / 100
					)}元 【下单扣除积分，扣除的积分不退】`"
				></el-checkbox>
			</el-descriptions-item>
		</el-descriptions>
		<div class="el-descriptions">
			<div class="el-descriptions__header">
				<span class="el-descriptions__title">其他信息</span>
			</div>
			<div class="el-descriptions__body">
				<el-form :model="amount" label-width="6em">
					<el-row :gutter="20">
						<el-col
							v-for="item in otherInfo"
							:key="item.prop"
							:xs="24"
							:sm="12"
							:md="12"
							:lg="8"
							:xl="6"
						>
							<el-form-item :prop="item.prop" :label="item.label">
								<SearchFormItem
									:column="item"
									:searchParam="amount"
								/>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</div>
	</scDrawer>
</template>

<script setup>
import { ref, watch, computed } from "vue";
import scDrawer from "@/components/scDrawer/index.vue";
import SearchFormItem from "@/components/SearchFormItem/index.vue";

const drawer = ref(true);

const amount = ref({
	useIntegral: false,
	integral: 870,
	name: "化妆全科（报名班）",
	teacher: "周老师",
	studentCount: "10/20",
	startTime: "2021-01-01",
	signUpCount: "10",
	classAmount: 1000,
	/** 初始商品套数 */
	init_goodsCount: 1,
	/** 初始商品价格 */
	init_goodsPrice: 1000,
	/** 初始报名金额 */
	init_signUpAmount: 1000,
	/** 初始实际金额 */
	init_actualPayment: 1000,
	/** 折扣后报名金额 */
	discount_signUpAmount: 1000,
	/** 折扣后实际金额 */
	discount_actualPayment: 1000,
	/** 商品套数 */
	goodsCount: 1,
	/** 商品价格 */
	goodsPrice: 1000,
	/** 报名金额 */
	signUpAmount: 1000,
	/** 实际金额 */
	actualPayment: 1000,
});
const discount = Math.floor(amount.value.integral / 100);
calcDsicount();
function calcDsicount() {
	amount.value.discount_signUpAmount =
		(amount.value.init_signUpAmount * 1000 - discount * 1000) / 1000;
	amount.value.discount_actualPayment =
		(amount.value.init_actualPayment * 1000 - discount * 1000) / 1000;
}
watch(
	() => amount.value.useIntegral,
	(val) => {
		if (val) {
			const payment = amount.value.signUpAmount * 1000 - discount * 1000;
			amount.value.signUpAmount = payment > 0 ? payment / 1000 : 0;
			amount.value.actualPayment = payment > 0 ? payment / 1000 : 0;
		} else {
			amount.value.signUpAmount = amount.value.init_signUpAmount;
			amount.value.actualPayment = amount.value.init_actualPayment;
		}
	}
);
watch(
	() => amount.value.signUpAmount,
	(val) => {
		amount.value.actualPayment = amount.value.signUpAmount;
	}
);
/** 原价合计 */
const originalPrice = computed(() => {
	const calc =
		(amount.value.classAmount * 1000 + amount.value.goodsPrice * 1000) /
		1000;
	return calc > 0 ? calc.toFixed(2) : 0;
});
/** 现价合计 */
const shouldPayment = computed(() => {
	const calc =
		(amount.value.signUpAmount * 1000 + amount.value.goodsPrice * 1000) /
		1000;
	return calc > 0 ? calc.toFixed(2) : 0;
});
/** 收费合计 */
const actualPayment = computed(() => {
	const calc =
		(amount.value.actualPayment * 1000 + amount.value.goodsPrice * 1000) /
		1000;
	return calc > 0 ? calc.toFixed(2) : 0;
});
/** 欠费合计 */
const debt = computed(() => {
	const calc =
		(amount.value.signUpAmount * 1000 - amount.value.actualPayment * 1000) /
		1000;
	return calc > 0 ? calc.toFixed(2) : 0;
});

// #region 学员信息
const userInfoList = ref([
	{
		label: "联系方式",
		value: "18100000000",
	},
	{
		label: "联系人姓名",
		value: "周爸爸",
	},
	{
		label: "渠道来源",
		value: "微信",
	},
	{
		label: "亲属关系",
		value: "父子",
	},
	{
		label: "生源学校",
		value: "某某中学",
	},
	{
		label: "意向程度",
		value: "正常",
	},
]);
// #endregion 学员信息

// #region 班级信息
const classInfo = [
	{
		name: "化妆全科（报名班）",
		teacher: "周老师",
		studentCount: "10/20",
		startTime: "2021-01-01",
		signUpCount: "10",
		classAmount: "1000",
		signUpAmount: "1000",
		actualPayment: "1000",
		integral: "0",
	},
	{
		isMergeRow: true,
	},
];
function handleTableRowMerge({ row, column, rowIndex, columnIndex }) {
	if (row.isMergeRow) {
		return columnIndex === 0 ? [1, 9] : [0, 0];
	} else {
		return [1, 1];
	}
}
function handleSelectSignUpCount(row) {
	console.log(row);
}
// #endregion 班级信息

// #region 其他信息
const otherInfo = [
	{
		component: "el-select",
		label: "经办校区",
		prop: "school",
		options: [
			{
				label: "男",
				value: "1",
			},
			{
				label: "女",
				value: "2",
			},
		],
	},
	{
		component: "el-select",
		label: "课程顾问",
		prop: "counselor",
		options: [
			{
				label: "男",
				value: "1",
			},
			{
				label: "女",
				value: "2",
			},
		],
	},
	{
		component: "el-input",
		label: "转介绍学员",
		prop: "student",
	},
	{
		component: "el-input",
		label: "转介绍员工",
		prop: "staff",
	},
	{
		component: "el-select",
		label: "渠道来源",
		prop: "source",
		options: [
			{
				label: "男",
				value: "1",
			},
			{
				label: "女",
				value: "2",
			},
		],
	},
	{
		component: "el-input",
		label: "备注",
		prop: "remark",
		props: {
			type: "textarea",
			rows: 2,
			placeholder: "请输入100字以内的备注",
			maxlength: 100,
			showWordLimit: true,
		},
	},
];
// #endregion 其他信息
</script>

<style lang="scss" scoped>
::v-deep(.el-drawer__body) {
	padding-left: 12px;
	padding-right: 12px;
}
::v-deep(.el-descriptions) {
	margin-bottom: 12px;
}
::v-deep(.el-descriptions__body) {
	padding-left: 8px;
}
</style>

<style>
.empty-cell {
	display: none !important;
}
</style>
